<template>
    <div style="margin: 20px">
        <a-button @click="onAddPoint" class="btn_add_class" type="dashed" icon="plus-circle">新增</a-button>
        <a-button @click="onCancel" class="btn_danger_class" type="dashed" icon="minus-circle">停用</a-button>
        <a-table :customRow ="onSelectChange"
                 :row-key="record => record.id"
                 :bordered="true" :scroll="{x: 500,y:100}"
                 :pagination="false"
                 :columns="columns"
                 :data-source="dataList"></a-table>
        <a-divider :dashed="true"></a-divider>
        <aggregation ref="aggregation" v-bind="$attrs" :basicInfo="selectInfo"></aggregation>
        <!-- 添加弹框 -->
        <a-modal v-model="addPoint" width="80%" title="新增监控站点" centered @cancel="()=>basicForm = {}" :maskClosable="false" destroyOnClose>
            <a-form-model ref="basicForm" layout="inline" :model="basicForm" @cancel="()=>basicForm = {}" :rules="basicRules">
                <a-collapse :activeKey="[1,2,3]">
                    <a-collapse-panel key="1" header = "废水监控点" >
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="监控点编号" prop="monitorCode">
                                    <a-input v-model="basicForm.monitorCode" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="监控点名称" prop="monitorName">
                                    <a-input v-model="basicForm.monitorName"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="排放规律" prop="emissionLaw">
                                    <a-select v-model="basicForm.emissionLaw" >
                                        <a-select-option :value="item" v-for="(item,index) in emissionLaw" :key="item">
                                            {{item}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="排放去向">
                                    <a-select>
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="最终排放去向" >
                                    <a-select >
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">

                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="联系人姓名" prop="monitorUserName">
                                    <a-input v-model="basicForm.monitorUserName"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="联系人电话" prop="monitorUserPhone">
                                    <a-input v-model="basicForm.monitorUserPhone"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">

                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="水功能区" >
                                    <a-select>
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="标志牌安装形式" >
                                    <a-select>
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">

                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="最大时流量(吨)" >
                                    <a-input />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="流量设备" >
                                    <a-input/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">

                            </a-col>

                        </a-row>
                        <a-row>
                            <a-col :span="8">
                                <a-form-model-item  label="距水源距离(公里)">
                                    <a-input />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="监控点位置">
                                    <a-input />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">

                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="流向类型" >
                                    <a-select >
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="流向名称" >
                                    <a-select>
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">

                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="8">
                                <a-form-model-item  label="是否进水口" prop="isIntake">
                                    <a-checkbox  v-model="basicForm.isIntake" value="true" name="isIntake"></a-checkbox>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="经    度" prop="x">
                                    <a-input v-model="basicForm.x"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="纬    度" prop="y">
                                    <a-input  v-model="basicForm.y"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="是否监测" prop="isMonitor">
                                    <a-checkbox v-model="basicForm.isMonitor" value="true" name="isMonitor"></a-checkbox>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="是否上传" prop="isUpload">
                                    <a-checkbox v-model="basicForm.isUpload" value="true" name="isUpload"></a-checkbox>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="是否停用" prop="isEnable">
                                    <a-checkbox v-model="basicForm.isEnable" value="true" name="isEnable"></a-checkbox>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-collapse-panel>
                    <a-collapse-panel key="2" header = "备案登记信息">
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="堰槽类型" >
                                    <a-input  />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="测流段长度(米)">
                                    <a-input/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="水面宽度（米）">
                                    <a-select>
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="喉道宽度（米）">
                                    <a-input />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="管径（厘米）">
                                    <a-input/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="采样位置" prop="emissionLaws">
                                    <a-select>
                                        <a-select-option value="暂无">
                                            暂无
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="预处理方式" >
                                    <a-input />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="输送距离（米）">
                                    <a-input/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">

                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="24" >
                                <a-form-model-item  label="备注" style="width: 93%">
                                    <a-input type="textarea" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-collapse-panel>
                </a-collapse>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="onSubmit">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
    import aggregation from "@/views/components/company-monitoring-point/aggregation";
    import md5 from "js-md5";
    export default {
        name: "wasteWater",
        components:{
            aggregation
        },
        props: {
            equipmentType:{
                type: Number,
                required: true
            },
            companyId:{
                type: String,
                required: true
            }
        },
        data() {
            return {
                emissionLaw:['稳定连续排放','周期性连续排放','不规律连续排放','有规律间断排放','不规律间断排放','其他'],
                basicForm:{
                    monitorCode:'',
                    emissionLaw:'',
                    geom:'',
                    x:'',
                    y:'',
                    companyId:this.companyId,
                    monitorName:'',
                    isEnable:false,
                    isUpload:true,
                    isMonitor:true,
                    isIntake:true,
                    monitorUserName:'',
                    monitorUserPhone:'',
                    monitorType:2,
                },
                selectInfo:{},
                addPoint:false,
                basicRules:{
                    monitorCode: [
                        { required: true, message: '请输入监控点编号', trigger: 'blur' }
                    ],
                    emissionLaw: [
                        { required: true, message: '请选择排放规律', trigger: 'blur' }
                    ],
                    monitorName: [
                        { required: true, message: '请输入监控点名称', trigger: 'blur' }
                    ],
                    x:[
                        { required: true, message: '请输入经度', trigger: 'blur' }
                    ],
                    y:[
                        { required: true, message: '请输入纬度', trigger: 'blur' }
                    ]
                },
                dataList:[],
                columns:[
                    {
                        title: '监控点编码',
                        dataIndex: 'monitorCode',
                        width: 100,
                    },
                    {
                        title: '监控点名称',
                        dataIndex: 'monitorName',
                        width: 200,
                    },
                    {
                        title: '经度',
                        dataIndex: 'x',
                        width: 100,

                    },
                    {
                        title: '纬度',
                        dataIndex: 'y',
                        width: 100,
                    },

                    {
                        title: '是否监测',
                        dataIndex: 'monitor',
                        width: 100,
                    },
                    {
                        title: '是否停用',
                        dataIndex: 'enable',
                        width: 100,
                    },
                    {
                        title: '创建人',
                        dataIndex: 'creatByName',
                        width: 100,
                    }
                ]
            };
        },
        methods: {
            onSelectChange(record, index) {
                return {
                    style: {
                        'cursor':'pointer',
                        'background-color': record.isSelect ? 'rgb(32 112 100 / 0.6)' : 'transparent',
                    },
                    on: {
                        click: (event) => {
                            this.dataList.forEach(item=>{
                                item.isSelect=false
                            })
                            this.dataList[index].isSelect=true
                            this.selectInfo=this.dataList[index]
                            this.$forceUpdate()
                        }
                    },
                }
            },
            getMonitoringPointList(){
                this.$api.getMonitorList({
                    current:1,
                    size:1000,
                    companyId:this.companyId,
                    monitorType:this.equipmentType
                }).then(res=>{
                    let dataList=res.data.data
                    dataList.forEach(item=>{
                        item.enable=item.isEnable===true?'是':'否'
                        item.upload=item.isUpload===true?'是':'否'
                        item.monitor=item.isMonitor===true?'是':'否'
                        item.intake=item.isIntake===true?'是':'否'
                    })
                    this.dataList=dataList
                    this.dataList[0].isSelect=true;
                    this.selectInfo=this.dataList[0]
                })
            },
            onAddPoint(){
                this.addPoint=true;
            },
            onCancel(){
                let _that = this;
                this.$confirm({
                    title: "是否确定停用此监控点？",
                    onOk() {
                        _that.$api.editMonitorList({
                            id:_that.selectInfo.id,
                            isEnable:true
                        }).then(res=>{
                            if(res.data.code==0){
                                _that.getMonitoringPointList();
                                _that.$message.success('停用成功')
                            }else{
                                _that.$message.error(res.data.errorMessage)
                            }
                        })
                    },
                    onCancel() {
                        console.log("Cancel");
                    },
                    class: "delk",
                });
            },
            onSubmit(){
                this.$refs.basicForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.$api.addMonitorList(this.basicForm).then(res=>{
                        if(res.data.code==0){
                            this.getMonitoringPointList();
                            this.addPoint=false;
                            this.basicForm={}
                            this.$message.success('添加成功')
                        }else{
                            this.$message.error(res.data.errorMessage)
                        }
                    })
                });
            }
        },
    }
</script>

<style scoped lang = "scss">
    @import "../../components/style/style.scss";
    .ant-divider-dashed{
        border-color: #207064;
    }
    .btn_add_class{
        color: white;
        background-color: #207064;
        border: 1px solid #2b4341;
        height: 25px;
        padding: 0 5px;
        margin-bottom: 10px;
    }
    .btn_danger_class{
        margin-left: 10px;
        color: white;
        background-color: #207064;
        border: 1px solid #2b4341;
        height: 25px;
        padding: 0 5px;
        margin-bottom: 10px;
    }
    ::v-deep .ant-table-bordered .ant-table-thead > tr > th,::v-deep .ant-table-bordered .ant-table-tbody > tr > td {
        border: 1px solid #2c6a60;
    }
    ::v-deep .ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, ::v-deep .ant-table-bordered .ant-table-fixed-left table, ::v-deep .ant-table-bordered .ant-table-fixed-right table {
        border: 1px solid #2c6a60;
    }
    ::v-deep .ant-table-bordered .ant-table-header > table, ::v-deep .ant-table-bordered .ant-table-body > table, ::v-deep .ant-table-bordered .ant-table-fixed-left table, ::v-deep .ant-table-bordered .ant-table-fixed-right table {
        border: 1px solid #2c6a60;
    }
    ::v-deep .ant-table-bordered.ant-table-empty .ant-table-placeholder {
        border-right: 1px solid #2c6a60;
        border-left: 1px solid #2c6a60;
    }
    ::v-deep .ant-table-fixed-header .ant-table-scroll .ant-table-header{
        margin-bottom: 0px!important;
    }
    ::v-deep .btn_add_class .anticon {
        color:#2196F3 !important;
    }
    ::v-deep .btn_danger_class .anticon {
        color:#E91E63 !important;
    }
    ::v-deep .ant-table-thead > tr > th,::v-deep .ant-table-tbody > tr > td {
        padding: 2px 10px;
        overflow-wrap: break-word;
    }
    ::v-deep .ant-table-wrapper .ant-table-thead > tr > th {
        background-color: #207064;
        color: #9fb043;
        font-size: 16px;
        font-weight: 600;
    }
    ::v-deep .ant-table-content{
        height: 132px;
    }
    ::v-deep .ant-table-wrapper .ant-table-placeholder{
        height: 100px;
        line-height: 65px;
    }



</style>
